<template>
  <!--  <div><h1>用户管理</h1></div>-->
  <!--查看对话框-->
  <div>
    <a-modal v-model:visible="visible" @ok="handleOk" width="60%">
      <div v-if="userData" :key="userData.id">
        <a-descriptions title="用户信息">
          <a-descriptions-item label="id"
            >{{ userData.id }}
          </a-descriptions-item>
          <a-descriptions-item label="登录名"
            >{{ userData.userAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="用户名"
            >{{ userData.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="角色名称"
            >{{ userData.userRole }}
          </a-descriptions-item>
          <a-descriptions-item label="公司"
            >{{ userData.company }}
          </a-descriptions-item>
          <a-descriptions-item label="部门"
            >{{ userData.dept }}
          </a-descriptions-item>
          <a-descriptions-item label="岗位"
            >{{ userData.job }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>

  <!--查询参数-->
  <a-form
    :model="jobQueryRequest"
    name="basic"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-row :gutter="24">
      <a-col :span="6">
        <a-form-item label="id" name="id">
          <a-input v-model:value="jobQueryRequest.id" placeholder="请输入id" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="岗位名称" name="jobTitle">
          <a-input
            v-model:value="jobQueryRequest.jobTitle"
            placeholder="请输入岗位名称"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="岗位编码" name="addressId">
          <a-input
            v-model:value="jobQueryRequest.addressId"
            placeholder="请输入岗位编码"
          />
        </a-form-item>
      </a-col>

      <a-col :span="6">
        <a-form-item label="岗位类型" name="type">
          <a-input
            v-model:value="jobQueryRequest.type"
            placeholder="请输入岗位类型"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-form-item>
      <a-button type="default" html-type="submit">筛选</a-button>
    </a-form-item>
  </a-form>

  <!--新增用户-->
  <a-button type="primary" block @click="addUser">新增</a-button>

  <!--在线用户列表-->
  <a-table :columns="columns" :data-source="jobList">
    <template #status="{ text: status }">
      <span>
        <a-tag :color="status === 0 ? 'green' : 'red'">
          {{ status === 0 ? "可用" : "不可用" }}
        </a-tag>
      </span>
    </template>

    <template #action="{ text }">
      <a-space wrap>
        <a-button type="primary" block @click="showModal(text.id)"
          >查看
        </a-button>
        <a-button type="dashed" block>修改</a-button>
        <a-button danger block @click="deleteUser">删除</a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import {
  DeleteRequest,
  UserAddRequest,
  UserControllerService,
} from "../../../generated";
import myAxios from "@/plugins/myAxios";

//弹窗是否显示
const visible = ref<boolean>(false);
// 展示弹窗
const showModal = (id: number) => {
  visible.value = true;
  GetUserById(id);
};
// 弹窗确认
const handleOk = (e: MouseEvent) => {
  visible.value = false;
};

// 在线用户
const userData = ref();

// 在线用户列表
const jobList = ref([]);

// 钩子函数
onMounted(() => {
  listUserByPage();
});

// 查询参数
const jobQueryRequest = {
  id: null,
  jobTitle: "",
  addressId: "",
  type: "",
};

// 新增参数
const userAddRequest: UserAddRequest = {
  userAccount: "",
  userAvatar: "",
  userName: "",
  userPassword: "",
  userRole: "",
};

// 删除参数
const deleteRequest: DeleteRequest = {
  id: 0,
};

// 点击，执行条件查询
const onFinish = () => {
  listUserByPage();
};
// 点击，条件查询失败
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

// 删除用户
const deleteUser = async () => {
  const res = await UserControllerService.deleteUserUsingPost(deleteRequest);
};

// 新增用户
const addUser = async () => {
  const res = await UserControllerService.addUserUsingPost(userAddRequest);
  // 登录成功，跳转到主页
  if (res.code === 0) {
    message.success("新增成功");
    userData.value = res.data;
  } else {
    message.error("新增失败");
  }
};

// 查询在线用户
const GetUserById = async (id: number) => {
  const res = await UserControllerService.getUserVoByIdUsingGet(id);
  // 查询成功，跳转到主页
  if (res.code === 0) {
    message.success("查询成功");
    userData.value = res.data;
  } else {
    message.error("查询失败");
  }
};

// 查询在线用户列表
const listUserByPage = async () => {
  const res = await myAxios
    .post("/job/list/page", jobQueryRequest)
    .then((res: any) => {
      return res;
    });

  // 查询成功，跳转到主页
  if (res.code === 0) {
    message.success("查询成功");
    jobList.value = res.data.records;
  } else {
    message.error("查询失败");
  }
};

// 表格-列
const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "岗位名称",
    dataIndex: "jobTitle",
  },
  {
    title: "岗位编码",
    dataIndex: "addressId",
  },
  {
    title: "岗位类型",
    dataIndex: "type",
  },
  {
    title: "是否可用",
    dataIndex: "status",
    key: "status",
    slots: { customRender: "status" },
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];
</script>

<style scoped>
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>
